<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_指令_自定义指令</title>
</head>
<body>

<!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->
<div id="root">
  <p v-upper-case="msg"></p>
  <p v-lower-case="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

  // 注册/定义全局指令
  Vue.directive('lower-case', function (el, binding) {
    el.textContent = binding.value.toLowerCase();
  });

  new Vue({
    el: '#root',
    data: {
      msg: 'Hello Atguigu'
    },
    // 注册/定义局部指令
    directives: {
      ['upper-case'](el, binding) {
        /*
          el element 绑定指令的当前元素
          binding 对象：包含指令和表达式的信息
            binding.value 表达式的值
        */
        // console.log(el, binding.value);
        el.textContent = binding.value.toUpperCase();
      }
    }
  })

</script>
</body>
</html>